<template>
	<div id="main_div">
		<el-card style="width: 500px;height: 300px; margin: 60px auto;">
			<el-form label-width="80px" style="margin-top: 40px;width: 400px;">
				<el-form-item label="用户名">
					<el-input v-model="user.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="login()">登录</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user : {username:'',password:''} // js对象  
			}
			
		},
		methods:{ //函数
			login(){
				console.log(this.user.username,this.user.password);
				//调用登录接口 将user数据传递给后端·
				// 将user对象进行序列化
				let data = this.qs.stringify(this.user)
				console.log(data)
				this.axios.post('http://localhost:8080/v1/users/login',data).then(
				  response => {
					  // console.log(response);
					  if(response.data.code == 1){
						  //登录成功
						  this.$message.success('登录成功！')
						  //将登录用户的数据保存在localStorage中，便于其他页面中使用 JSON.stringify()将js对象转成json
						  //localStorage.user = JSON.stringify(response.data.data) // localStorage={user:XXX}   localStorage.user=XXX
						  location.href='/'
					  }else{
						  this.$message.error("登录失败")
					  }
				  }
				)
			}
		}
		
		
		
		
		
	}
</script>

<style scoped>
	#main_div{
		background-image: url('/public/imgs/loginbg.gif');
		background-size: cover;
		background-position: center;
		height: 500px;
		overflow: hidden; /* 解决粘连性问题*/
	}
</style>